<template>
  <div class="layout">
        <Row type="flex">
            <Col span="3" class="layout-menu-left">
                <Tree :data="baseData" @on-select-change="changeCateId"></Tree>
            </Col>
            <Col span="21">
                <div class="layout-content">
                    <h1>News</h1>
                    <Button type="primary" @click="addData" ><Icon type="plus-round"></Icon>&nbsp;添加</Button>&nbsp;&nbsp;
                    <Button type="primary" @click="getData"><Icon type="refresh"></Icon>&nbsp;刷新</Button>&nbsp;&nbsp;
                    <Button type="error" @click="deleteData" ><Icon type="android-delete"></Icon>&nbsp;删除</Button>
                    <Input  icon="ios-search" v-model="filter.title" placeholder="请输入..." style="width: 200px" @on-click="searchitem"></Input>
                   
                        <Modal v-model="modal1" title="添加新闻">
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                            <FormItem label="标题" prop="title">
                                <Input v-model="formValidate.title" placeholder="请输入标题"></Input>
                            </FormItem>
                            <FormItem label="作者" prop="author">
                                <Input v-model="formValidate.author" placeholder="请输入作者名字"></Input>
                            </FormItem>
                            
                            <FormItem label="内容" prop="content">
                                <Input v-model="formValidate.content" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
                            </FormItem>
                            <FormItem label="cateId" prop="cateId">
                                <Input v-model="formValidate.cateId"></Input>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="handleSubmit('formValidate')" >提交</Button>
                                <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                            </FormItem>
                            
                        </Form>
                    
                        </Modal>
                    <Table :columns="columns1" border  ref="selection" :data="list" @on-selection-change="chose"></Table><br/>
                    <Button @click="handleSelectAll(true)">设置全选</Button>
                        <Button @click="handleSelectAll(false)">取消全选</Button><br/><br/>
                    <Page :total="filter.total" :current="filter.page" show-elevator :page-size="filter.limit" @on-change="changepage" placement="top" show-sizer @on-page-size-change="onPageSizeChange"></Page><br/><br/>
                </div>
            </Col>
        </Row>
    </div>
</template>

<script>
import Base from '../common/Base.js';
export default {
    mixins:[Base],
    data(){
        return {
            module:'news',
            baseData: [],
            formValidate: {
                    title: '',
                    content:'',
                    author: '',
                    cateId:''
            },
             ruleValidate: {
                    title: [
                        { required: true, message: '标题不能为空', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '内容不能为空', trigger: 'blur' },
                        { type: 'string', min: 5, message: '介绍不能少于5字', trigger: 'blur' }
                    ],
                    author:[
                        { required: true, message: '作者不能为空', trigger: 'blur' }
                    ]
                },
            columns1: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '标题',
                        key: 'title'
                    },
                   
                    {
                        title: '内容',
                        key: 'content'
                    },
                    {
                        title: '作者',
                        key: 'author'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 155,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.editmode=true;
                                            this.editData(params.row._id);
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.removeData(params.row._id,params.index);
                                        }
                                    }
                                }, '删除'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.goToComment(params.row._id);
                                        }
                                    }
                                }, '评论')
                                
                            ]);
                        }
                    }
                ]


        }
    },
    methods:{
        handleSelectAll (status) {
            this.$refs.selection.selectAll(status);
        },
        changeCateId(selcetion){
             if(selcetion.length!=0)
                {
                    this.filter.cateId=selcetion[0]._id;
                }else{
                    this.changeCateId(selcetion);
                }
                this.getData();
        },
        goToComment(newsId){
            this.$router.push({path:'/comment/'+newsId});
        }
    },
    created(){
        this.$http({
            url:'http://localhost:3000/cate/list/1',
            method:'get',
        }).then(res=>{
            this.baseData=res.data;
        })
        
        // this.$http({
        //     method:'post',
        //     url:`http://localhost:3000/${this.module}/list`,
        //     data:this.filter
        // })
        // .then(res=>{
        //     //console.log(res,'========');
        //     this.list=res.data.rows;
        //     this.filter.total =res.data.total;
        // })
    }
}
</script>

<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
    }
    .layout-breadcrumb{
        padding: 10px 15px 0;
    }
    .layout-content{
        min-height: 580px;
       
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }
    
    .layout-copy{
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }
    .layout-menu-left{
        padding-left:10px;
        background: gray;
    }
    .layout-header{
        height: 60px;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .layout-logo-left{
        width: 90%;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        margin: 15px auto;
    }
</style>